import { modalFormState, operateType, popularLevelOptions } from "./store";
import styles from "./index.module.less";
import { RuleObject } from "ant-design-vue/es/form/interface";
import { fetchList } from ".";
export const modalInstance = ref<any>(null);
export const modalLoading = ref(false);
export const modalVisible = ref(false);
export const modalTitle = ref<any>("");
const modal_disable_ok_button = computed(() => {
  if (operateType.value === "updateLevel") {
    return isEmptyType(modalFormState.level);
  }
  if (operateType.value === "refuse" || operateType.value === "agree") {
    return false;
  }
});
const help = ref<any>(
  <>
    <div class="fs12">{$t("placeholder136")}</div>
  </>
);
const defineFinishApiMap = (string, formState) => {
  const apiMap = new Map([
    [
      { key: "updateLevel" },
      () =>
        popularApi.update({ editId: formState.editId, level: formState.level }),
    ],
    [
      { key: "refuse" },
      () =>
        popularApi.updateAudit({
          status: modalFormState.status,
          id: modalFormState.id,
          note: modalFormState.note,
        }),
    ],
    [
      { key: "agree" },
      () =>
        popularApi.updateAudit({
          status: modalFormState.status,
          id: modalFormState.id,
        }),
    ],
  ]);
  return apiMap;
};

const handleFinishApiTask = async (string, formState) => {
  try {
    let [, api]: any = [...defineFinishApiMap(string, formState)].find(
      ([object]) => object.key == string
    );
    modalLoading.value = true;
    const result: any = await api();
    if (result.code != 200) return message.error(result.message);
    modalVisible.value = false;
    message.success(result.message);
    fetchList();
  } catch (error: any) {
    message.error(error.message);
  } finally {
    modalLoading.value = false;
  }
};

export const modalConfig = () => {
  const defineModal = {
    modalInstance,
    loading: modalLoading,
    visible: modalVisible,
    maskClosable: true,
    disable_ok_button: modal_disable_ok_button,
    disable_cancel_buttton: false,
    reverse: ref(true),
    title: modalTitle,
    formState: modalFormState,
    on: {
      async finish(values: any) {
        handleFinishApiTask(operateType.value, modalFormState);
      },
    },
    slot: {
      extra_form_item: () => (
        <>
          {operateType.value === "updateLevel" ? (
            <div class={styles.modal_container}>
              <a-row class="s-drawer-extra-row">
                <a-col span={24}>
                  <div class={[styles.tips_card, "mb16"]}>
                    <div class={styles.icon}>
                      {renderIcon(
                        "icon-jinggao-" + " " + styles["icon-jinggao-"]
                      )}
                    </div>
                    <div class={styles.txt}>{$t("placeholder137")}</div>
                  </div>
                </a-col>
              </a-row>

              <a-row class="s-drawer-extra-row">
                <a-col span={24}>
                  <a-form-item
                    label={$t("table124")}
                    name="level"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    help={help.value}
                    rules={[
                      {
                        required: true,
                        trigger: ["change", "blur"],
                        validator: (rule: RuleObject, value: string) => {
                          if (isEmptyType(value)) {
                            help.value = (
                              <>
                                <div class="fs12">{$t("placeholder47")}</div>
                              </>
                            );

                            return Promise.reject();
                          }

                          help.value = (
                            <>
                              <div class="fs12">{$t("placeholder136")}</div>
                            </>
                          );
                          return Promise.resolve();
                        },
                      },
                    ]}
                  >
                    <s-select
                      vModel:newValue={modalFormState.level}
                      placeholder={$t("placeholder18")}
                      options={popularLevelOptions}
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          ) : operateType.value === "refuse" ? (
            <a-form-item
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 20 }}
              style="width:100%"
              label="说明"
              help={<div class="fs11">{$t("popular18")}</div>}
            >
              {withDirectiveInput({
                vNode: (
                  <a-textarea
                    vModel:value={modalFormState.note}
                    rows={4}
                    show-count
                    maxlength={20}
                    placeholder={$t("popular20") + 20 + $t("popular21")}
                  />
                ),
              })}
            </a-form-item>
          ) : operateType.value === "agree" ? (
            <div class="mb16" style="width:100%">
              {$t("popular19")}
            </div>
          ) : null}
        </>
      ),
    },
  };
  return defineModal;
};
